<template>
	<layout>
    <view class="header">
      <tm-sheet :margin="[5]" >
      <tm-input :searchWidth="120" @search="search" prefix="tmicon-search" searchLabel="搜索"></tm-input>
      </tm-sheet>
    </view>

      <view class="topbar">
        <tm-sheet :margin="[5]" >
          <tm-segtab :width="636" @change="switchTopBar" :list="list" defaultValue="0"></tm-segtab>
        </tm-sheet>
      </view>

      <view class="banner">
        <tm-sheet>

            <image
                src="https://store.tmui.design/api_v2/public/random_picture"
            ></image>

        </tm-sheet>
      </view>

      <view class="content">
        <tm-sheet v-for="(group, index) in recommends">
        <view class="title-wrap">
          <h3 >热门{{group.text}}</h3>
          <tm-text :font-size="24" color="#918484" label="更多>"></tm-text>
        </view>
        <view class="movie-wrap">
          <view class="item">
          <view class="cover">
            <image :src="'https://store.tmui.design/api_v2/public/random_picture?'+index"></image>
            <view class="dynamic">更新至19集</view>
          </view>
          <view class="title">这个标题</view>
        </view>

          <view class="item">
            <view class="cover">
              <image src="https://store.tmui.design/api_v2/public/random_picture?1"></image>
              <view class="dynamic">更新至19集</view>
            </view>
            <view class="title">这个标题</view>
          </view>

          <view class="item">
            <view class="cover">
              <image src="https://store.tmui.design/api_v2/public/random_picture?12"></image>
              <view class="dynamic">更新至19集</view>
            </view>
            <view class="title">这个标题</view>
          </view>

          <view class="item">
            <view class="cover">
              <image src="https://store.tmui.design/api_v2/public/random_picture?13"></image>
              <view class="dynamic">更新至19集</view>
            </view>
            <view class="title">这个标题</view>
          </view>

        </view>
          </tm-sheet>
      </view>

	</layout>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import layout from './components/layout.nvue';

const recommends = [
  { text: '动漫', id: '1' },
  { text: '电影', id: '2' },
  { text: '电视剧', id: '3' },
  { text: '短剧', id: '4' }
]
const list = ref([
  { text: '推荐', id: '0' },
] . concat(recommends))



function search() {
  
}
function switchTopBar(val){
  console.log(val)
}

</script>

<style lang="scss" scoped>

.movie-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item{
    width: 32%;
    margin-bottom: 20rpx;
    .cover {
      position: relative;
      image {
        border-radius: 10rpx;
        width: 100%;
      }
      .dynamic {
        position: absolute;
        bottom: 20rpx;
        color:#fff;
        text-align: center;
        width: 100%;
        overflow: hidden;
      }
      .title{
        overflow: hidden;
      }
    }
  }
}

.title-wrap{
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;
}

</style>